<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    height="auto"
    :title="$t('leftTree.addTable')"
    class="win-module"
    :ok-button="addModule"
    :resize="false"
    :maximizable="false"
    cancel-button
    @close="cancelModal"
  >
    <je-form ref="formRefModule" layout="vertical">
      <je-form-item
        label-align="top"
        :label="$t('addTableModal.typeLabel')"
        name="RESOURCETABLE_TYPE"
      >
        <je-radio-group v-model:value="modelRef.RESOURCETABLE_TYPE" name="RESOURCETABLE_TYPE">
          <je-radio value="PT">{{ $t('addTableModal.typePt') }}</je-radio>
          <je-radio value="TREE0">{{ $t('addTableModal.typeTree0') }}</je-radio>
          <je-radio value="TREE1">{{ $t('addTableModal.typeTree1') }}</je-radio>
        </je-radio-group>
      </je-form-item>
      <je-form-item
        label-align="top"
        :label="$t('addTableModal.nameLabel')"
        v-bind="validateInfos.RESOURCETABLE_TABLENAME"
      >
        <je-input v-model:value="modelRef.RESOURCETABLE_TABLENAME" />
      </je-form-item>
      <je-form-item
        label-align="top"
        :label="$t('addTableModal.codeLabel')"
        v-bind="validateInfos.RESOURCETABLE_TABLECODE"
      >
        <je-input v-model:value="modelRef.RESOURCETABLE_TABLECODE" />
      </je-form-item>
      <span class="annotation">
        {{ $t('addTableModal.HintOne') }}<br />{{ $t('addTableModal.HintTwo') }}
      </span>
      <span class="annotation">
        {{ $t('addTableModal.HintThree') }}
      </span>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, watch, ref, onMounted, reactive, toRaw } from 'vue';
  import { Input, Modal, Radio, Form } from '@jecloud/ui';
  import { addTable } from '../../../api/index';
  import { verifyData } from '../../../helper/common';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalAddTable',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeRadio: Radio,
      JeRadioGroup: Radio.Group,
    },
    props: {
      modalShow: {
        type: Boolean,
        default: false,
      },
      modalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        required: true,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(props.modalShow);
      const modalData = ref(props.modalData);
      const modelRef = reactive({
        RESOURCETABLE_TYPE: 'PT',
        RESOURCETABLE_TABLENAME: '',
        RESOURCETABLE_TABLECODE: '',
      });
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', 'cancel');
      };
      const rulesRef = reactive({
        RESOURCETABLE_TABLENAME: verifyData.name,
        RESOURCETABLE_TABLECODE: verifyData.code,
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = ({ $modal, button }) => {
        const modal = $modal,
          btn = button;
        btn.loading = true;
        //保存数据逻辑
        validate()
          .then(() => {
            let node = modalData.value;
            //根据表类型取的参数值(默认普通表)
            let RESOURCETABLE_ICON = 'jeicon jeicon-table';
            let RESOURCETABLE_TYPE = modelRef.RESOURCETABLE_TYPE;
            let RESOURCETABLE_MOREROOT = '0';
            //如果是单根树
            if (RESOURCETABLE_TYPE == 'TREE0') {
              RESOURCETABLE_TYPE = 'TREE';
              RESOURCETABLE_ICON = 'jeicon jeicon-treetable';
              //如果是多根树
            } else if (RESOURCETABLE_TYPE == 'TREE1') {
              RESOURCETABLE_TYPE = 'TREE';
              RESOURCETABLE_MOREROOT = '1';
              RESOURCETABLE_ICON = 'jeicon jeicon-treetable';
            }
            const params = {
              RESOURCETABLE_TABLENAME: modelRef.RESOURCETABLE_TABLENAME.trim(),
              RESOURCETABLE_TABLECODE: modelRef.RESOURCETABLE_TABLECODE.trim(),
              RESOURCETABLE_TYPE,
              RESOURCETABLE_MOREROOT,
              SY_PARENT: node.id ? node.id : 'ROOT',
              RESOURCETABLE_ICON,
              tableCode: 'JE_CORE_RESOURCETABLE',
              SY_PRODUCT_ID: props.productData.productId,
            };

            addTable(params)
              .then((obj) => {
                btn.loading = false;
                modal.close();
                Modal.notice(obj.message, 'success');
                emit('changeData', 'checked', {
                  id: obj.data.JE_CORE_RESOURCETABLE_ID,
                  text: obj.data.RESOURCETABLE_TABLENAME,
                  code: obj.data.RESOURCETABLE_TABLECODE,
                  nodeInfo: obj.data.RESOURCETABLE_TYPE,
                  parent: {
                    id: node.id,
                  },
                });
              })
              .catch((e) => {
                btn.loading = false;
                Modal.alert(e.message, 'error');
              });
          })
          .catch((error) => {
            btn.loading = false;
          });
        return false;
      };
      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        visibleModule,
        addModule,
        centered: true,
      };
    },
  });
</script>
<style lang="less" scoped>
  .win-module {
    .annotation {
      color: #aaaaaa;
      line-height: 28px;
      font-size: 14px;
      font-weight: Italic;
      display: inline-block;
      font-style: oblique;
    }
  }
</style>
